<template>
  <div>
    <Detail ref="detail"></Detail>
    <ZgPage
      ref="page"
      title="公告管理"
      addBtnName="新增公告"
      :pageOpt="{showConditionBtn:true,conditionHeight:110}"
      :addOpt="{title:'新增公告',width:'60%'}"
      :updateOpt="{title:'修改公告',width:'60%'}"
      @search="onSearch"
      @resetCondition="onResetCondition"
      @searchWithCondition="onSearchWithCondition"
      @del="onDel"
      @add="onAdd"
      @update="onUpdate"
    >
      <template slot="columns">
        <a-table-column title="标题">
          <template slot-scope="text,record">
            <a @click="toDetail(record)">{{ record.title }}</a>
          </template>
        </a-table-column>
        <a-table-column :width="100" dataIndex="author" title="发布者"></a-table-column>
        <a-table-column :width="100" title="状态">
          <template slot-scope="text,record">
            <a-tag v-if="record.isPublish" color="green">已发布</a-tag>
            <a-tag v-else>未发布</a-tag>
          </template>
        </a-table-column>
        <a-table-column :width="100" title="置顶">
          <template slot-scope="text,record">
            <a-tag v-if="record.isTop" color="red">顶</a-tag>
          </template>
        </a-table-column>
        <a-table-column :width="100" title="可见性">
          <template slot-scope="text,record">
            <a-tag v-if="record.isAll" color="blue">所有人</a-tag>
            <a-tag v-else>自定义</a-tag>
          </template>
        </a-table-column>
        <a-table-column :width="150" dataIndex="stime" title="开始时间"></a-table-column>
        <a-table-column :width="150" dataIndex="etime" title="结束时间"></a-table-column>
      </template>
      <template slot="add">
        <Add ref="add"></Add>
      </template>
      <template slot="update" slot-scope="scope">
        <Update ref="update" :jsonStr="scope.jsonStr"></Update>
      </template>
      <template slot="condition">
        <a-row>
          <a-col :span="6">
            <div class="flx pd5">
              <div class="w140 tar">标题：</div>
              <ZgInput v-model="condition.title"></ZgInput>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="flx pd5">
              <div class="w140 tar">发布者：</div>
              <ZgInput v-model="condition.author"></ZgInput>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="flx pd5">
              <div class="w140 tar">发布状态：</div>
              <ZgSelect v-model="condition.isPublish" :options="[{value:'true',label:'已发布'},{value:'false',label:'未发布'}]"></ZgSelect>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="flx pd5">
              <div class="w140 tar">是否置顶：</div>
              <ZgSelect v-model="condition.isTop" :options="[{value:'true',label:'已置顶'},{value:'false',label:'未置顶'}]"></ZgSelect>
            </div>
          </a-col>
        </a-row>
      </template>
    </ZgPage>
  </div>
</template>
<script>
import Add from './Add'
import Update from './Update'
import Detail from './Detail'
export default {
  components: {
    Add, Update, Detail
  },
  data () {
    return {
      condition: {
        title: '',
        author: '',
        isPublish: '',
        isTop: ''
      }
    }
  },
  methods: {
    onSearch (param) {
      this.$http.get('/zg-system/ann/page', param, data => {
        this.$refs.page.endSearch(
          {
            total: parseInt(data.total),
            list: data.records.map(t => {
              t.key = t.id
              return t
            })
          }
        )
      })
    },
    onResetCondition () {
      this.condition = {
        title: '',
        author: '',
        isPublish: '',
        isTop: ''
      }
    },
    onSearchWithCondition (param) {
      this.$http.get('/zg-system/ann/page', Object.assign({}, this.condition, param), data => {
        this.$refs.page.endSearch(
          {
            total: parseInt(data.total),
            list: data.records.map(t => {
              t.key = t.id
              return t
            })
          }
        )
      })
    },
    onDel (ids) {
      this.$http.post('/zg-system/ann/del', ids, () => {
        this.$refs.page.search()
      })
    },
    onAdd () {
      const result = this.$refs.add.save()
      if (!result.isOk) {
        this.$error({ title: result.msg })
        return
      }
      this.$http.post('/zg-system/ann/add', result.data, () => {
        this.$refs.page.hideAdd()
        this.$refs.page.search()
      })
    },
    onUpdate () {
      const result = this.$refs.update.save()
      if (!result.isOk) {
        this.$error({ title: result.msg })
        return
      }
      this.$http.post('/zg-system/ann/update', result.data, () => {
        this.$refs.page.hideUpdate()
        this.$refs.page.search()
      })
    },
    toDetail (obj) {
      this.$refs.detail.open(obj.id)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
